<template>
  <div class="homeindex">
    <div class="home-center">
      <HomeTopbar />
      <HotSearch />
      <HomeType />
    </div>
    <div class="listnav">
      <van-tabs v-model="active" sticky line-height="5px" color="rgb(252, 86, 9,.8)">
        <van-tab title="关注">
          <PinglunList />
        </van-tab>
        <van-tab title="推荐" active>
          <PinglunList />
        </van-tab>
        <van-tab title="附近">
          <PinglunList />
        </van-tab>
        <van-tab title="美食">
          <PinglunList />
        </van-tab>
        <van-tab title="玩乐">
          <PinglunList />
        </van-tab>
        <van-tab title="旅行">
          <PinglunList />
        </van-tab>
        <van-tab title="教培">
          <PinglunList />
        </van-tab>
        <van-tab title="宠物">
          <PinglunList />
        </van-tab>
        <van-tab title="运动健身">
          <PinglunList />
        </van-tab>
        <van-tab title="遛娃">
          <PinglunList />
        </van-tab>
        <van-tab title="结婚">
          <PinglunList />
        </van-tab>
        <van-tab title="逛街">
          <PinglunList />
        </van-tab>
        <van-tab title="家居生活">
          <PinglunList />
        </van-tab>
        <van-tab title="直播">
          <PinglunList />
        </van-tab>
        <van-tab title="打卡地">
          <PinglunList />
        </van-tab>
      </van-tabs>
    </div>

    <div class="nothing"></div>
    <HomeBottombar />
  </div>
</template>

<script>
import HomeTopbar from "../../components/cheyi/home/HomeTopbar.vue";
import HotSearch from "../../components/cheyi/home/HotSearch.vue";
import HomeType from "../../components/cheyi/home/HomeType.vue";
import HomeBottombar from "../../components/cheyi/home/HomeBottombar.vue";
import PinglunList from "../../components/cheyi/home/PinglunList.vue";

export default {
  name: "HomeView",
  // directives: {
  //   focus: {
  //     inserted(el) {
  //       el.click();
  //     }
  //   }
  // },
  data() {
    return {
      active: 1
    };
  },
  components: {
    HomeTopbar,
    HotSearch,
    HomeType,
    HomeBottombar,
    PinglunList
  }
};
</script>
<style lang="scss" scoped>
.homeindex {
  width: 100%;
  height: 177.867vw;
  box-sizing: border-box;
  overflow: auto;
  ::-webkit-scrollbar {
    display: none;
  }
  ::v-deep .van-tabs__nav--line {
    box-sizing: content-box;
    height: 100%;
    padding-bottom: 2.133vw;
  }
  ::v-deep .van-tab--active {
    font-size: 4.267vw;
    font-weight: bolder;
  }
  // color: #fc5609;
  .home-center {
    width: 95%;
    // height: 100%;
    margin: auto;
    position: relative;
  }
  .listnav {
    width: 100%;
  }

  .nothing {
    height: 16vw;
  }
}
</style>
